import React, { MouseEventHandler, useState } from "react"
import { Component ,useComponentStore } from "../../editor/stores/components"
import { useComponentConfigStore } from "../../editor/stores/component-config"
import { HoverMask } from "../HoverMask"
import { SelectedMask } from "../SelectedMask"

export function EditArea() {
    const { components, curComponentId, setCurComponentId } = useComponentStore()
    const { componentConfigs } = useComponentConfigStore()

    const [hoverComponentId, setHoverComponentId] = useState<string | null>(null)
    
    const handleMouseOver: MouseEventHandler = (e) => {
        const path = e.nativeEvent.composedPath() // 一个数组，记录冒泡经过的元素

        // 获取到首个带有 id 的元素
        for(let i = 0; i < path.length; i++){
            const ele = path[i] as HTMLElement
            const componentId = ele.dataset?.componentId
            if (componentId) {
                setHoverComponentId(componentId)
                return 
            }
        }
    }

    const handleMouseLeave: MouseEventHandler = () => {
        setHoverComponentId(null)
        // setCurComponentId(null)
    }

    const handleClick: MouseEventHandler = (e) => {
        const path = e.nativeEvent.composedPath() // 一个数组，包含事件冒泡路径中的所有元素

        // 获取到首个带有 id 的元素
        for(let i = 0; i < path.length; i++){
            const ele = path[i] as HTMLElement
            const componentId = ele.dataset?.componentId
            if (componentId) {
                setCurComponentId(componentId)
                return 
            }
        }
    }

    // 深度遍历 components, 根据组件名渲染对应的组件
    function renderComponents(components: Component[]): React.ReactNode{
        return components.map(component => {
            const config = componentConfigs[component.name]
            if (!config?.dev) return null
            return React.createElement(config.dev, 
                {
                    key: component.id,
                    id: component.id,
                    name: component.name,
                    styles: component.styles,
                    ...config.defaultProps,
                    ...component.props,
                },
                renderComponents(component.children || [])
            )
        })
    }

    return (
        <div 
            className="edit-area h-[100%]" 
            onMouseOver={handleMouseOver} 
            onMouseLeave={handleMouseLeave}
            onClick={handleClick}
            >
            { renderComponents(components) }

            {/* hoverComponentId !== curComponentId 表示 hover 与 click 状态不能同时出现在一个组件上 */}
            { hoverComponentId && hoverComponentId !== curComponentId  &&(
                <HoverMask 
                    containerClassName="edit-area" 
                    componentId={hoverComponentId} 
                />
            )}
            
            { curComponentId && (
                <SelectedMask 
                    containerClassName="edit-area"
                    componentId={curComponentId} 
                />
            )}
        </div>
    )
}